<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script src="../static/layui/layui.js"></script>
</head>
<body>
<fieldset class="table-search-fieldset">
    <legend>查询条件</legend>
    <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-inline">
                        <label for="name"></label><input id="name" type="text" name="nickName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <label for="email"></label><input id="email" type="text" name="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" id="searchBtn" lay-submit
                            lay-filter="formDemo" data-type="reload">
                        <i class="layui-icon layui-icon-search"></i> 查询
                    </button>
                    <button type="reset" id="resetBtn" class="layui-btn layui-btn-primary"><i
                            class="layui-icon layui-icon-refresh"></i> 重 置
                    </button>
                </div>
            </div>
        </form>
    </div>
</fieldset>
<div class="layui-row" id="popUpdateTest" style="display:none;">

    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" lay-filter="qwer" action="" style="margin-top:20px">
            <div class="layui-form-item" hidden="hidden">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="id" placeholder="请输入编号" autocomplete="off" class="layui-input">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off"
                               class="layui-input">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
                               class="layui-input">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <label>
                        <input type="text" name="nickName" required lay-verify="required" placeholder="请输入昵称" autocomplete="off"
                               class="layui-input">
                    </label>
                </div>
            </div>
            
            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="updateMessage">确认</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<br>

<br>
<table class="layui-table"
       lay-data="{height:315, url:'http://localhost:8082/user',where:{nickName:'',email:''},page:true, id:'tableAll', toolbar: '#toolbarDemo'}"
       lay-filter="test">
    <thead>
    <tr>
        <th lay-data="{field:'id',align:'center'}">ID</th>
        <th lay-data="{field:'email',align:'center'}">邮箱</th>
        <th lay-data="{field:'password',align:'center'}">密码</th>
        <th lay-data="{field:'nickName',align:'center'}">昵称</th>
        <th lay-data="{field:'gender',align:'center'}">性别</th>
        <th lay-data="{field:'createTime',align:'center'}">开始时间</th>
        <th lay-data="{field:'endTime',align:'center'}">结束时间</th>
        <th lay-data="{title: '操作', minWidth: 50, templet: '#currentTableBar',fixed:'right',align:'center'}">操作</th>
    </tr>
    </thead>
</table>
<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe608;</i>新增</button>
    </div>
</script>
<script>
    layui.use('table', function () {
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        //第一个实例
        table.render({
            elem: '#tableAll',
        });
        // 条件搜索
        $('#searchBtn').on('click', function () {
            table.reload('tableAll', {
                method: 'get',
                where: {
                    nickName: $('#name').val().trim(),
                    email: $('#email').val().trim()
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });
        // 重置按钮
        $('#resetBtn').on('click', function () {
            $('#name').val('')
            $('#email').val('')
            table.reload('tableAll', {
                method: 'get',
                page: {
                    curr: 1
                },
                where: {
                    name: '',
                    email: ''
                },
            });
            return false;
        });
        table.on('toolbar(test)', function (obj) {
            if (obj.event === 'add'){
                addUser()
            }
        })
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            let row = obj.data
            console.log(row)
            if (obj.event === 'edit') {
                updateUser(obj, row);
            } else if (obj.event === 'delete') {
                layer.confirm('确定要删除这个用户吗', function (index) {
                    layer.close(index);
                    console.log("客户id"+row.id)
                    deleteUser(row.id);
                });
            }
        });
        //修改客户信息
        function updateUser(obj, data) {
            //回填数据到表单
            form.val("qwer", {
                 "id": data.id
                ,"email": data.email
                , "password": data.password
                , "nickName": data.nickName
            });
            layer.open({
                type: 1,
                title: "修改用户信息",
                area: ['420px', '500px'],
                content: $("#popUpdateTest")//引用的弹出层的页面层的方式加载修改界面表单
            });
            form.on('submit(updateMessage)', function (massage) {
                let data = massage.field;
                $.ajax({
                    type: "post",
                    url: "http://localhost:8082/updateUser",
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    datatype: "json",
                    success: function (data) {
                        let obj = JSON.parse(data);
                        layer.closeAll();//关闭所有的弹出层
                        if (obj.code === 0) {
                            layer.msg("修改成功", {icon: 6});
                            //刷新数据
                            $(".layui-laypage-btn").click();
                        } else {
                            layer.msg("修改失败", {icon: 5});
                        }
                    }
                })
                return false

            })
        }
        // 删除接口
        function deleteUser(id) {
            let url = "http://localhost:8082/deleteUser?id=" + id;
            $.ajax({
                type: "get",
                url: url,
                success: function (data) {
                    let obj = JSON.parse(data);
                    if (obj.code === 0) {
                        layer.msg("删除成功",{icon: 6});
                        //刷新数据
                        $(".layui-laypage-btn").click();
                    } else {
                        layer.msg("删除失败");
                    }
                }
            })
            return false;
        }
        // 添加客户信息
        function addUser() {
            //回填数据到表单
            form.val("qwer", {
                "email": ''
                , "nickName": ''
                , "gender": ''
            });
            layer.open({
                type: 1,
                title: "添加客户信息",
                area: ['420px', '500px'],
                content: $("#popUpdateTest")//引用的弹出层的页面层的方式加载修改界面表单
            });
            //监听提交
            form.on('submit(updateMessage)', function (message) {
                let field = message.field;
                $.ajax({
                    type: "post",
                    url: "http://localhost:8082/addUser",
                    data: JSON.stringify(field),
                    contentType: 'application/json',
                    datatype: "json",
                    success: function (data) {
                        let obj = JSON.parse(data);
                        layer.closeAll();//关闭所有的弹出层
                        if (obj.code === 0) {
                            layer.msg("添加成功", {icon: 6});
                            //刷新数据
                            $(".layui-laypage-btn").click();
                        } else {
                            layer.msg("添加失败", {icon: 5});
                        }
                    }
                });
                return false
            });
        }
    });
</script>
</body>
</html>